<template>
    <view class="info-container" :style="{ direction: $t('dir') }" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'" style="margin-top: 24rpx">
        <view v-for="(item, index) in list" :key="index" class="row chat-item" @click="goDetail(item)" @longpress="longPressClick(item)">
            <view class="p-relative d-inline-block" style="width: 100rpx; height: 100rpx">
                <u-image :src="item.avatar" width="100rpx" height="100rpx" radius="50%" :lazy-load="true" mode="aspectFull" />
            </view>
            <view class="row justify-between items-center py-xs" :style="{ direction: $t('dir') }" style="width: calc(100% - 100rpx); border-bottom: 2px solid #f2f2f2; padding-bottom: 54rpx">
                <view class="px-sm d-inline-block" style="width: 70%">
                    <view class="row items-center">
                        <text :class="'dir-' + $tools.strDir(item['name' + $t('k1')] || item.name || item.name_zh)">{{ item['name' + $t('k1')] || item.name || item.name_zh }}</text>
                    </view>
                    <view class="fs-xs text-gray message"> ID: {{ item.id }} </view>
                    <view class="fs-xs text-gray message dir-ltr text-right">
                        {{ item.updated_at }}
                    </view>
                </view>
                <view class="fs-xl px-sm" style="text-align: end">
                    <view style="font-family: fantasy; color: #c5c5c5">{{ item.count }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'info-card',
    props: {
        list: {
            type: Array,
            default: function () {
                return []
            },
        },
    },
    data() {
        return {}
    },
    watch: {},
    mounted() {},
    methods: {
        longPressClick(item) {
            this.$emit('longPressClick', item)
        },
        goDetail(item) {
            uni.navigateTo({
                url: `/cooperate/pages/resource/broker?id=${item.id}`,
            })
        },
    },
}
</script>
<style scoped lang="scss">
.chat-item {
    padding: 8rpx 12rpx;
    border-radius: 24rpx;
}

.info-container {
    box-sizing: content-box;
    padding: 0 22rpx 2rpx 22rpx;
}

.hot-number {
    background-color: red;
    left: 0rpx;
    text-align: center;
    top: 0rpx;
    font-size: 18rpx;
    font-weight: bold;
}

.message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 400rpx;
}

.repeat-send {
    color: #ef233c;
}
</style>